<template>
<view v-if="Object.keys(info).length" class="main">
  <nav-bar title="我的代表作品" customBack @customBack="customBack" />
  <view class="pr">
    <view class="user_opt flex_r">
      <image class="opt_img" @click="isShow = true"
        src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/dot_icon.png"></image>
      <button class="opt_img" open-type="share">
        <image class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/share_icon1.png"></image>
      </button>
    </view>
    <swiper v-if="info.coverUrl && info.type === 2" class="swiper" :current="current"  :duration="200">
      <swiper-item v-for="(item, idx) in info.imgList" :key="idx">
        <image class="swiper_item" mode="aspectFill" :src="item.imgUrl" />
      </swiper-item>
      <view class="dot">
        <text class="dot_active">{{ current + 1 }}</text>/{{ info.imgList.length }}
      </view>
    </swiper>
    <video v-else id="videoEle" object-fit="contain" @ended="play = true" @click="showVideoBtn = !showVideoBtn" :controls="false"
      autoplay :show-center-play-btn="false" :src="info.PlayUrl">
      <image v-show="showVideoBtn && play" class="playImg" @click="onClickVideo"
        src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/play.png"></image>
      <image v-show="showVideoBtn && !play" class="playImg" @click="onClickVideo"
        src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/pause.png"></image>
    </video>
  </view>
  <view class="work_info">
    <view class="work_name">{{ info.worksName }}</view>
    <view class="flex_a_c">
      <view class="work_type">{{ info.firstTypeName }}</view>{{ info.createTime }}
    </view>
    <view class="opt flex_a_c">
      <image class="opt_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/rep_play_icon.png"></image>
      {{ info.seeNum }}
      <image class="opt_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/rep_giveLike_icon.png"></image>
      {{ info.likeNum }}
      <image class="opt_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/rep_collect_icon.png"></image>
      {{ info.collectNum }}
    </view>
  </view>
  <view v-if="info.worksDescribe" class="work_desc">
    {{ info.worksDescribe }}
  </view>
  <view v-if="id" class="flex1 mt-15">
    <commentFirst class="flex1" :reprId="id" :replyType="1" >
      <template class="flex1" v-slot:opt="{ onOpenReply, data, replyNum, total }">
        <view class="comment flex_a_c" style="width: 750rpx">
          <view class="comment_input flex1"  @click="onOpenReply(0, 0, info => (data.comment.unshift(info), ++replyNum))">写评论</view>
          <view class="comment_opt flex_a_c">
             <!-- <view class="flex_a_c" @click="onCollect(info)">
              <image v-if="!info.collectFlag" class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/star_icon1.png"></image>
              <image v-else class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/star_icon1_active.png" />
              <text class="opt_count">{{ info.collectNum }}</text>
             </view>
            <view class="flex_a_c" @click="onLikeFlag(info.likeFlag)">
              <image v-if="!info.likeFlag" class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/give_like_icon.png"></image>
              <image v-else class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/give_like_icon_active.png"></image>
              <text class="opt_count">{{ info.likeNum }}</text>
            </view> -->
            <image class="opt_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/report_img.png"></image>
            <text class="opt_count">{{ total }}</text>
          </view>
        </view>
      </template>
    </commentFirst>
  </view>
  <!-- <view :class="['fixed_footer flex_a_c flex_b_c']">
    <view class="btns flex1 primary" @click="onDel">删除</view>
    <navigator :url="`/pages/ipElite/publishRepWork?id=${info.id}`" hover-class="none" v-if="info.auditStatus !== 1" class="btns flex1 normal ml-20">
      修改
    </navigator>
    <view v-if="info.auditStatus === 2" class="btns confirm flex1 ml-20" @click="onShelf">{{ info.shelfStatus ? '下架' : '上架' }}</view>
  </view> -->
</view>
<van-dialog id="van-dialog" cancel-button-color="#999999" confirm-button-color="#00B277" />
<van-popup
  :show="isShow"
  round
  :zIndex="10"
  position="bottom"
  custom-style="background: #F4F7FC;"
  @close="isShow = false"
>
  <view class="opt_wrapper">\
   <!-- status 1 展示中 2 已下架 3 已驳回 -->
    <view class="wrapper flex_r">
      <navigator :url="`/pages/ipElite/publishRepWork?id=${info.id}`" hover-class="none" class="wrapper_item">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_edit_icon.png"></image>
        <text>编辑</text>
      </navigator>
      <!-- <view class="wrapper_item">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_top_icon.png"></image>
        <text>置顶作品</text>
      </view>
      <navigator v-if="props.worksTypeFirst !== 204 && props.worksTypeFirst !== 205" hover-class="none" :url="`/pages/work/publish/dynamic?id=${props.id}`" class="wrapper_item">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_addDynamic_icon.png"></image>
        <text>添加动态</text>
      </navigator>
      <view class="wrapper_item">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_top_icon.png"></image>
        <text>精准推送</text>
      </view> -->
      <view v-if="info.myShowStatus !== 3" class="wrapper_item" @click="onShelf">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_down_icon.png"></image>
        <text>{{ info.shelfStatus ? '下架' : '上架' }}</text>
      </view>
      <view class="wrapper_item" @click="onDel">
        <image class="wrapper_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/detail_del_icon.png"></image>
        <text>删除</text>
      </view>
    </view>
    <view class="cancle" @click="isShow = false">取消</view>
  </view>
</van-popup>
</template>
<script setup>
import Dialog from '/wxcomponents/vant/dialog/dialog';
import { ref, getCurrentInstance, reactive, watch, computed } from "vue";
import { getVideoPlayUrl } from '@/api/common'
import { postdelRepWorks, shelfReprWorks } from '@/api/center'
import { onPageScroll, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import storage from '@/utils/storage'
import commentFirst from '@/components/comment/commentFirst.vue'

import {
  getWorksLibraryDetail,
} from '@/api/ipElite'
let current = ref(0)
let auditStatusList = [
  { id: 1, label: '审核中' },
  { id: 2, label: '审核通过' },
  { id: 3, label: '已驳回' },
]
let showVideoBtn = ref(false)
let videoContext = uni.createVideoContext('videoEle')
let play = ref(false)
let info = ref({})
let id = ref('')
let isShow = ref(false)
let onClickVideo = () => {
  // const _input = proxy.$refs['appidInput'];
  // console.log(_input)

  //获取video
  if (play.value) {
    //开始播放
    videoContext.play()//开始播放
    play.value = false
  } else {
    videoContext.pause()//暂停
    play.value = true
  }
  showVideoBtn.value = false
}
onLoad(async ({ id: current }) => {
  id.value = current || 164
  await fnGet(id.value)
})
// 获取详情
let fnGet = async id => {
  const { code, data } = await getWorksLibraryDetail({ id })
  if (code === 200) {
    if (data.type === 1) {
      let { data: { PlayUrl } } = await getVideoPlayUrl({ videoId: data.videoUrl })
      data.PlayUrl = PlayUrl
    }
    info.value = data
  }
}
let customBack = () => {
  uni.redirectTo({
    url: '/pages/center/ipElite/repworksManage'
  })
}
let onDel = () => {
  Dialog.alert({
    title: '温馨提示',
    cancelButtonColor: '#999999',
    confirmButtonColor: '#00B277',
    cancelButtonText: '再想想',
    showCancelButton: true,
    closeOnClickOverlay: true,
    confirmButtonText: '删除',
    message: '您确定要删除该作品？',
  }).then(async () => {
    const { code, data } = await postdelRepWorks({ id: info.value.id })
    if (code === 200) {
      uni.redirectTo({
        url: '/pages/center/ipElite/repworksManage'
      })
    }
    // on close
  }).catch(() => {
    
  });
}
let onShelf = async () => {
  let shelfStatus = info.value.shelfStatus ? 0 :1
  const { code, data } = await shelfReprWorks({ id: info.value.id, shelfStatus })
  if (code === 200) {
    info.value.shelfStatus = shelfStatus
    uni.showToast({
      title: `${shelfStatus ? '上架' : '下架'}成功`,
      icon: 'none'
    })
  }
}
</script>
<style lang="scss" scoped src="/static/style/ipElite/repworksDetail.scss"></style>
<style lang="scss" scoped src="/static/style/center/index.scss"></style>